<template>
  <div class="home">
    <div class="header">
      <div class="logo">
        <img src="../../../assets/img/home/logo.png" alt="">
      </div>
      <div class="title">
        <img src="../../../assets/img/store/nongyao-title_03.png" alt="">
      </div>
    </div>

    <div class="plist">
      <list-panel header="商品列表" :list="list" :type="type" ></list-panel>
    </div>
  </div>
</template>

<script>
  import ListPanel from '@/components/ListPanel/index'
  import { getProducts } from '@/api/product'

  export default {
    components: {
      ListPanel
    },
    data () {
      return {
        type: '1',
        list: []
      }
    },
    created () {
      this.getProducts()
    },
    methods: {
      getProducts () {
        getProducts().then((res) => {
          var items = res.data.items
          items = items.map(item => {
            item.url = '/detail/' + item.id
            item.src = require('../../../assets/img/store/nsl.png')
            return item
          })
          this.list = items
          console.log('res: ', items)
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .header {
    height: 100vh*0.25;
    background-image: url('../../../assets/img/store/nongyao-header-bg_02.png');
    .title {
      text-align: left;
      margin-left: 10px;
    }
  }

</style>
